<template>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @up="upCallback"
	 @emptyclick="emptyClick">
	 
	 <!--me-tabs导航组件-->
	 	<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="80"></me-tabs>
	 
		<view class="couponcontanier">
			<view :class="['coupon',item.status !=1 ?'invalidcoupon':'']" v-for="(item,index) in listdata" :key="index">
				<view class="left">
					<view class="money">¥ {{item.price}}</view>
					<view class="shop">
						<view class="eli">{{route[tabIndex].mode==2?'话费充值券（三网通）':''}}{{item.title}}</view>
						<view class="timer" v-if="route[tabIndex].mode==2">无门槛限制</view>
						<view class="timer" v-if="item.status ==1 && route[tabIndex].mode==1">
							<view class="timeitem">{{item.hours}}</view>
							<text>时</text>
							<view class="timeitem">{{item.minutes}}</view>
							<text>分</text>
							<view class="timeitem">{{item.seconds}}</view>
							<text>秒</text>
							<view>失效</view>
						</view>
					</view>
				</view>
				<view :class="['right',item.status ==1?'textbox':'']" @click="gotouse(index)">
					<text>{{status[item.status-1]}}</text>
				</view> 
				<!--线-->
				<view class="line">
					<view class="point"></view>
					<view class="deash"></view>
					<view class="point"></view>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>
<script>
	/**
	 * 我的红包卡券
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
			mixins: [MescrollMixin],
		data() {
			return {
				tabIndex: 0, // 当前菜单下标
				tabs:['商品优惠券','话费优惠券'],
				listdata: [],
				status: ['去使用', '已使用', '已失效'],
				// hours:0,
				// minutes:0,
				// seconds:0,
				downOption: {
					use: false,
				},
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 未找到订单信息 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				},
				route:[{
					mode:1,
					url:'/member/coupon'
				},{
					mode:2,
					url:'/member/rechargeCoupon'
				}]
			};
		},
		onLoad() {
			//this.initdata();
		},
		methods: {
			tabChange(e){
				this.tabIndex = e
				this.listdata = [];
				this.mescroll.resetUpScroll();
			},
			
			countdown(strstarttime, object) {
				//console.log(this.route[this.tabIndex].mode)
				//是话费卡券更改状态
				if(this.route[this.tabIndex].mode==2){
					object.status = parseInt(object.status)+1 
				}
				if(!strstarttime){
					return	object
				}
				let date = strstarttime;
				date = date.substring(0, 19);
				date = date.replace(/-/g, '/');
				let starttime = new Date(date).getTime() / 1000;
				let dates = starttime - Date.parse(new Date()) / 1000;
				object.hours = parseInt(dates/(60 *60)) > 0 ? parseInt(dates/(60 *60)) : 0;
				object.minutes = parseInt((dates % (60 * 60)) / 60) > 0 ? parseInt((dates % (60 * 60)) / 60) : 0;
				object.seconds = dates % 60 > 0 ? dates % 60 : 0;
				return object;
			},
			
			emptyClick(e) {
				console.log(e);
			},
			upCallback(page) {
				// console.log(this.route[this.tabIndex])
				this.getinitdata(page.num,this.route[this.tabIndex]).then(res => {
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg('请求出现错误！');
				})
			},
			
			//获取列表数据
			getinitdata(pages,route) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: route.url,
						param: {
							page: pages,
						}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							let coupondata = res.data.data
								coupondata.map((item, index) => {
									coupondata[index] = this.countdown(item.expiration_time, item);
								})
							//console.log(coupondata)
							resolve(coupondata);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			},

			// initdata() {
			// 	this.$HttRequest({
			// 		url: '/member/coupon',
			// 		param: ''
			// 	}).then((res) => {
			// 		//	console.log(res);
			// 		if (res.status === 10000) {
			// 			this.listdata = res.data.data;
			// 			let coupondata = res.data.data;
			// 			coupondata.map((item, index) => {
			// 				coupondata[index] = this.countdown(item.expiration_time, item);
			// 			});
			// 			this.listdata = coupondata
			// 		} else {
			// 			this.$ShowMsg(res.message)
			// 		}
			// 	}).catch((error) => {
			// 		console.log(error)
			// 		//异常错误
			// 		this.$ShowMsg('statusCode：' + error.errMsg);
			// 	})
			// },
			//去使用优惠券
			gotouse(index) {
				if (this.listdata[index].status == 1) {
					//如果为话费充值券
					if(this.route[this.tabIndex].mode==2){
						//跳转话费充值
						uni.navigateTo({
							url: '/pages/recharge/recharge?type=couponpage&coupon_id='+this.listdata[index].id
						})
					}else{
						let objectinfo = JSON.stringify(this.listdata[index]);
						uni.navigateTo({
							url: '/pages/prizemall/prizemalldetail?id=' + this.listdata[index].product_id + '&coupon='+ objectinfo
						})
					}
				}
			}
		}
	}
</script>
<style lang="scss">
	.couponcontanier {
		width: 90%;
		margin: 0 auto;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.coupon {
		margin: 20rpx 0;
		color: #fff;
		width: 100%;
		height: 150rpx;
		background-color: $uni-color-primary;
		border: 1rpx solid #2f84fd;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.line {
			position: absolute;
			right: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			
			.point {
				width: 15rpx;
				height: 15rpx;
				background-color: #fff;
				border-radius: 50%;
			}

			.deash {
				margin: 8rpx 0;
				height: 130rpx;
				width: 1rpx;
				border-left: 1rpx dashed #fff;
			}
		}

		.left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			width: 72%;
			overflow:hidden;
			.money {
				font-size: 35rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
				font-weight: bold;
				
			}

			.shop {
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				width: 70%;
				.eli {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
				}
				.timer {
					margin-top: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.timeitem {
						color: $uni-color-primary;
						display: flex;
						justify-content: center;
						align-items: center;

						width: 50rpx;
						height: 30rpx;
						background-color: #fff;

					}

					text {
						margin: 0 10rpx;
					}
				}
			}
		}

		.right {
			font-size: 30rpx;
			text-align: center;
			width: 160rpx;
			
		}
		.textbox{
			margin-right: 20rpx;
			width: 90rpx;
			padding: 15rpx;
			border-radius: 10rpx;
			background-color: #4f97fd;
		}
	}
	.invalidcoupon{
		background-color: #979797;
		border: 1rpx solid #a3a3a3;
	}
</style>
